<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        .lunBeTu {
            position: relative;
            width: 100vw;
            height: 64vw;
            z-index: 1;

        }

        .ss {
            width: 87.466667vw;
            height: 10.666667vw;
            background-color: #b6ada9;
            border-radius: 5.333333vw;
            padding: 2.666667vw 4.8vw;
            color: #fff;
            font-size: 3.733333vw;
            z-index: 3;
            position: absolute;
            top: 5.333333vw;
            left: 4.266667vw;

        }

        .two {
            width: 92vw;
            height: 21.333333vw;
            margin: 5.066667vw 4vw 6.666667vw 4vw;
            background-color: #fff;
        }

        .two ul {
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
            height: 100%;
            justify-content: space-between;
        }

        .two ul li img {
            width: 15.466667vw;
            height: 15.466667vw;
        }

        .two ul li p {
            font-size: 3.2vw;
            color: #808080;
            margin-top: 2.933333vw;
        }

        .three {
            width: 91.733333vw;
            height: 44.26vw;
            z-index: 1;
            background-color: skyblue;
            margin: 5.066667vw 4vw 6.666667vw 4vw;
            padding: 2.133333vw;
        }
        .three .span1{
            color: #54211d;
            font-size: 4.8vw;            
            font-weight: 700;
        }
        .three .span2{
            font-size: 2.666667vw;
            font-weight: 400;
            color: #54211D;
        }
        .three.xia{
            background-color: #fff;
            padding: 2.666667vw;
            width: 91.733333vw;
            height: 30.933333vw;

        }
        .three .xia img {
            width: 22.933333vw;
            height: 30.933333vw;
        }

    </style>

</head>

<body>
    <div>
        <img src="images/home_cmd_sm.png" alt="" class="lunBeTu">
        <p class="ss">搜索...</p>
    </div>
    <div class="two">
        <ul>
            <li>
                <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/c1/qznz.png" alt="">
                <p>气质女装</p>
            </li>
            <li>
                <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/c1/xbsd.png" alt="">
                <p>箱包手袋</p>
            </li>
            <li>
                <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/c1/ssnx.png" alt="">
                <p>时尚女鞋</p>
            </li>
            <li>
                <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/c1/sssp.png" alt="">
                <p>时尚饰品</p>
            </li>
        </ul>
    </div>
    <div class="three">
        <span class="span1">特惠推荐</span>
        <span class="span2">精 选 全 攻 略</span>
        <div class="xia">
            <img src="images/home_cmd_inner.png" alt="">
        </div>
    
    
    </div>


</body>

</html>